<!--/**
* 用户调研 *
*
* @author LWG
* @date 2022/9/20 17:10
* @since 1.0.0
*/-->
<template>
    <!-- 考试题目页面 -->
    <div>
      <!-- 最外层div，循环几组题目 -->
      <div
        v-for="(item, index) of list2"
        :key="index"
        style="margin-bottom: 10px"
      >
        <!-- 这是题目 -->
        <p class="title">{{ item.title }}</p>
        <!-- 这是选项 -->
        <van-radio-group v-model="form.radioArray[index]">
          <van-radio
          class="box"
            v-for="it of item.list"
            :key="it.id"
            :label="it.id"
            :name="it.anames"
            @click="handleRadioChanges(item, it.id)"
            >{{ it.anames }}</van-radio
          >
        </van-radio-group>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" @click="feelBack"
          >提交</van-button
        >
      </div>
    </div>
  </template>
  
  <script>
  /*
  第一步：循环数组，里面有几组题目就循环多少个div
  
  第二步：里面的van-radio-group部分也就是一组单选框，循环每组题目内的选项部分。配合上面的题目就实现了一组题目加选项的试题出来了。
  
  第三步：选项点击后存入的变量form.radioArray[index]，这里index是最外层容器循环的角标。比如第一次循环，出来了第一组题目和选项，这个时候index=0.那么这时候你点击存入的选项数据就存在form.radioArray[0]，
  然后第二次循环，出现第二组试题和选项，点击后选项数据存在form.radioArray[1]，以此类推，就能把每一组的选项值存入到数组对应的位置，不会乱。这样数组内的第一个数据就是你第一组的题目选项。
  
  第四步：点击选项的时候会触发方法，参数把你当前的这一组试题传过去，还有你选中项的id，然后handleRadioChanges方法接收后处理步骤：1，遍历每一个选项看哪一个和你传进来的id是一致的就代表这一项是你选中的单选框，
  就把他的 pcStatus = 1，反之则=0，这个pcStatus代表是否选中,1代表选中，0代表未选中。然后把你的这一组数据去重，这一步是为了防止你点击第一组的选项1后存进去，然后点击选项2又存进去，就重复了，我们要的是单选，
  所以用这个去重，如何去重呢，就是对比数组中的每组题目的id，就是那个000,001的。比如我发现我的数组内有两个id：000的那就去重，去掉前面的，我取最后一个，因为你点击的最后一项肯定是最终选中的项。最后经过筛选得出的
  这个数组reslist，就是我们所有题目点击选项后的数据。里面是一个数组套几个对象，其实就是几个题目，根据每个题目中的pcStatus是否为1来判断这个题目选中的是哪一个选项。
  
  注意事项：这里的van-radio标签上有个name属性，这个是标识符的意思，vant组件自带的属性。这个标识符需要用不同的，否则如果相同，你点击一个选项会把所有选项都选中，因为你没有区分标识符，程序认不出来你点击的是哪一个。
  就会把所有相同标识符的都选中，这个地方只要不写死就行，我直接用的选项的名字当表示符，那基本就不会一样了。
  
  最后：数据结构方面就需要跟后端配合，让后端给你传一个这样的数据结构，这样你就可以做出来，然后你选中后还是传一个这样的数据结构过去后端，后端根据每一组题目的哪一个选项pcStatus = 1来判断这一组选中的是什么，
  从而给你返回这个人对应的考试分数
  */
  import {Toast} from "vant";

  export default {
    data() {
      return {
        form: {
          //单选部分渲染数据
          radioArray: [],
        },
        //用来去重的数组
        reslist: [],
        act: '',
        //后台传来的数据(模拟)
        list2: [
          {
            title: "应用满意度",
            id: "000",
            list: [
              { id: "11", anames: "满意", pcStatus: null },
              { id: "12", anames: "一般", pcStatus: null },
              { id: "13", anames: "不好", pcStatus: null },
            ],
          },
          {
            title: "应用是否存在问题",
            id: "001",
            list: [
              { id: "21", anames: "存在很多问题", pcStatus: null },
              { id: "22", anames: "存在少数问题", pcStatus: null },
              { id: "23", anames: "不存在问题", pcStatus: null },
            ],
          },
          {
            title: "你最喜欢的应用功能",
            id: "002",
            list: [
              { id: "31", anames: "分享", pcStatus: null },
              { id: "32", anames: "互助", pcStatus: null },
              { id: "33", anames: "学习", pcStatus: null },
            ],
          },
        ],
      };
    },
    created() {
      this.handCheck();
    },
    methods: {
      feelBack(){
        Toast("提交成功")
        history.go(-1)

      },
      // 赋值
      handCheck() {
        const aaa = [];
        //循环每一项
        this.list2.forEach((item, index) => {
          item.list.forEach((it) => {
            //看pcStatus是否等于1把id存进去
            if (it.pcStatus === 1) {
              aaa.push(it.id);
            }
          });
          //循环时判断如果aaa的长度等于index加1.代表循环到的这一项被选中，就不动，如果不等于，代表没有选择，给null
          if (aaa.length !== index + 1) {
            aaa.push(null);
          }
        });
        //过滤一遍后给到form.radioArray
        this.form.radioArray = aaa;
      },
      // 取值
      handleRadioChanges(item, id) {
        console.log(item, id);
        this.act = id;
        //循环判断传过来的id和遍历的哪一个id一致就把他的pcStatus改为1，代表选中，否则给0带表未选中
        item.list.forEach((res) => {
          if (res.id === id) {
            res.pcStatus = 1;
          } else {
            res.pcStatus = 0;
          }
        });
        //把每一项给到新的数组去重，防止点的多个一样的存进数组。
        this.reslist.push(item);
        let newArry = this.reslist;
        //数组去重选择最后一条数据
        for (var i = 0; i < newArry.length; i++) {
          for (var j = i + 1; j < newArry.length; j++) {
            if (newArry[i].id == newArry[j].id) {
              newArry.splice(i, 1);
              j--;
            }
          }
        }
        this.reslist = newArry;
        console.log(this.reslist);
      },
    },
  };
  </script>
  
  <style scoped>
  .box {
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 20px;
    margin-bottom: 2px;
    padding-left: 40px;
    font-size: 16px;
    border-bottom: 1px #ccc solid;
    
  }
  .title {
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-bottom: 2px;
    background-color: #007bbb;
      font-size: 16px;
      color: #fff;
      font-weight: bold;
  }
  
  </style>
  
